<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>【CSS】50个有价值的CSS编写规则，让你写出更好的CSS | Vixcity</title><meta name="keywords" content="CSS"><meta name="author" content="Vixcity"><meta name="copyright" content="Vixcity"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="50个有价值的CSS编写规则，让你写出更好的CSS我最近写了篇《掌握和成为更好的Web开发人员的15件事》（地址：https:&#x2F;&#x2F;beforesemicolon.medium.com&#x2F;15-css-things-to-master-and-become-a-better-web-developer-a18f370a8bc5），然后意识到编写CSS不仅需要专注于某些功能。 通常，使CSS变得困难的原">
<meta property="og:type" content="article">
<meta property="og:title" content="【CSS】50个有价值的CSS编写规则，让你写出更好的CSS">
<meta property="og:url" content="http://vixcity.gitee.io/my-gitee-blog/2021/10/11/%E3%80%90CSS%E3%80%9150%E4%B8%AA%E6%9C%89%E4%BB%B7%E5%80%BC%E7%9A%84CSS%E7%BC%96%E5%86%99%E8%A7%84%E5%88%99%EF%BC%8C%E8%AE%A9%E4%BD%A0%E5%86%99%E5%87%BA%E6%9B%B4%E5%A5%BD%E7%9A%84CSS/index.html">
<meta property="og:site_name" content="Vixcity">
<meta property="og:description" content="50个有价值的CSS编写规则，让你写出更好的CSS我最近写了篇《掌握和成为更好的Web开发人员的15件事》（地址：https:&#x2F;&#x2F;beforesemicolon.medium.com&#x2F;15-css-things-to-master-and-become-a-better-web-developer-a18f370a8bc5），然后意识到编写CSS不仅需要专注于某些功能。 通常，使CSS变得困难的原">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://vixcity.gitee.io/my-gitee-blog/img/CSS.jpg">
<meta property="article:published_time" content="2021-10-10T16:00:00.000Z">
<meta property="article:modified_time" content="2022-01-04T03:04:47.312Z">
<meta property="article:author" content="Vixcity">
<meta property="article:tag" content="CSS">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://vixcity.gitee.io/my-gitee-blog/img/CSS.jpg"><link rel="shortcut icon" href="/my-gitee-blog/img/favicon.ico"><link rel="canonical" href="http://vixcity.gitee.io/my-gitee-blog/2021/10/11/%E3%80%90CSS%E3%80%9150%E4%B8%AA%E6%9C%89%E4%BB%B7%E5%80%BC%E7%9A%84CSS%E7%BC%96%E5%86%99%E8%A7%84%E5%88%99%EF%BC%8C%E8%AE%A9%E4%BD%A0%E5%86%99%E5%87%BA%E6%9B%B4%E5%A5%BD%E7%9A%84CSS/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//fonts.googleapis.com" crossorigin=""/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/my-gitee-blog/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&amp;display=swap" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/my-gitee-blog/',
  algolia: undefined,
  localSearch: {"path":"/my-gitee-blog/search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":1,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: '/my-gitee-blog/',
      css: '/my-gitee-blog/'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '【CSS】50个有价值的CSS编写规则，让你写出更好的CSS',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2022-01-04 11:04:47'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/my-gitee-blog/css/mycss.css"><link rel="stylesheet" href="/my-gitee-blog/css/newStyle.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@1.1.1/css/font-awesome-animation.css"><link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/css/main.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/hexo-electric-clock@1.0.6/clock.css"><link rel="stylesheet" href="https://unpkg.zhimg.com/hexo-butterfly-wowjs/lib/animate.min.css" media="print" onload="this.media='screen'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.4.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/my-gitee-blog/img/avatar.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/my-gitee-blog/archives/"><div class="headline">文章</div><div class="length-num">55</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/my-gitee-blog/tags/"><div class="headline">标签</div><div class="length-num">50</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/my-gitee-blog/categories/"><div class="headline">分类</div><div class="length-num">18</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/my-gitee-blog/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/PicBed"><i class="fa-fw fas fa-image"></i><span> 图库</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/about/"><i class="fa-fw fas fa-heart"></i><span> 关于我</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/my-gitee-blog/img/CSS.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/my-gitee-blog/">Vixcity</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/my-gitee-blog/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/PicBed"><i class="fa-fw fas fa-image"></i><span> 图库</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/about/"><i class="fa-fw fas fa-heart"></i><span> 关于我</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">【CSS】50个有价值的CSS编写规则，让你写出更好的CSS</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-10-10T16:00:00.000Z" title="发表于 2021-10-11 00:00:00">2021-10-11</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-01-04T03:04:47.312Z" title="更新于 2022-01-04 11:04:47">2022-01-04</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/my-gitee-blog/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/">大前端</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/my-gitee-blog/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/CSS/">CSS</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">5.8k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>17分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="【CSS】50个有价值的CSS编写规则，让你写出更好的CSS"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="50个有价值的CSS编写规则，让你写出更好的CSS"><a href="#50个有价值的CSS编写规则，让你写出更好的CSS" class="headerlink" title="50个有价值的CSS编写规则，让你写出更好的CSS"></a>50个有价值的CSS编写规则，让你写出更好的CSS</h2><p>我最近写了篇《掌握和成为更好的Web开发人员的15件事》（地址：<a target="_blank" rel="noopener" href="https://beforesemicolon.medium.com/15-css-things-to-master-and-become-a-better-web-developer-a18f370a8bc5%EF%BC%89%EF%BC%8C%E7%84%B6%E5%90%8E%E6%84%8F%E8%AF%86%E5%88%B0%E7%BC%96%E5%86%99CSS">https://beforesemicolon.medium.com/15-css-things-to-master-and-become-a-better-web-developer-a18f370a8bc5），然后意识到编写CSS</a>不仅需要专注于某些功能。</p>
<p>通常，使CSS变得困难的原因是，开发人员没有一套可以遵循和使用的工具，以及最佳实践指南，以帮助他们享受编写CSS的乐趣。  </p>
<p>多年来，我收集了一组规则和工具，这些规则和工具在CSS之旅中对我有很大帮助，我想与你分享其中我觉得比较实用及有有价值的50条规则。</p>
<h2 id="1-、使用预处理器"><a href="#1-、使用预处理器" class="headerlink" title="1 、使用预处理器"></a><strong>1 、使用预处理器</strong></h2><p>CSS 预处理器能够帮助你少写CSS，它们可帮助你组织，避免重复和模块化CSS的工具和实用程序。</p>
<p>我个人更喜欢SASS，但我也同样喜欢LESS和Stylus。</p>
<p>我之所以喜欢他们，是因为他们没有采用“新方式”来设置页面样式。它仍然是CSS，具有额外的语法和功能。</p>
<h2 id="2、分离全局与局部风格"><a href="#2、分离全局与局部风格" class="headerlink" title="2、分离全局与局部风格"></a><strong>2、分离全局与局部风格</strong></h2><p>区分用于任何一个或一组 HTML 选择器的样式与用于特定事物的样式至关重要。我将所有全局样式保存在一个单独的文件中（尤其是在使用预处理器时），但你也可以将其放在 CSS 文件的顶部，然后专注于为站点的特定组件、元素或部分设置特定样式。</p>
<h2 id="3、模块化你的代码风格"><a href="#3、模块化你的代码风格" class="headerlink" title="3、模块化你的代码风格"></a><strong>3、模块化你的代码风格</strong></h2><p>你不需要将所有 CSS 捆绑在一个文件中，除非它会被使用。如果用户登陆主页，则只需要包含该页面的样式即可，不需要其他内容。我将样式表分为基本样式和非基本样式。</p>
<p>基本样式是在页面加载后用户会看到的样式，非基本样式是那些保持隐藏状态的组件，如对话框和通知。需要显示用户操作的元素或组件。</p>
<h2 id="4、正确延迟加载样式表"><a href="#4、正确延迟加载样式表" class="headerlink" title="4、正确延迟加载样式表"></a><strong>4、正确延迟<strong><strong>加载</strong></strong>样式表</strong></h2><p>有很多方法可以延迟加载你的CSS文件，使用WebPack等捆绑程序并进行动态导入时通常更容易。你可以创建自己的Javascript CSS加载器，也可以通过在页面中包含样式表时使用&lt;link&gt;标记来延迟非关键CSS。</p>
<h2 id="5、具体但不太具体"><a href="#5、具体但不太具体" class="headerlink" title="5、具体但不太具体"></a><strong>5、具体但不太具体</strong></h2><p>具体要好，因为它定义了哪种样式适用于什么风格，但是一旦过于具体，它就会变得降低性能，并同时增加捆绑包的大小。有时甚至表明CSS或设计系统不正确。特定选择器的示例：</p>
<ul>
<li><p>section#sample-section —（问为什么需要指定“ section”和ID）</p>
</li>
<li><p>main div p.title —（询问为什么需要指定.title以外的任何内容）</p>
</li>
<li><p>[disabled] -不够具体且昂贵</p>
</li>
<li><p>#sample-最具体，最有效的选择器</p>
</li>
<li><p>* -全球和超级昂贵（最慢）</p>
</li>
</ul>
<p>作为过于具体的，有时是需要，但把它看作一个例外，而不是普遍的做法。不够具体会导致样式冲突，过于具体会给浏览器带来困难。</p>
<h2 id="6、像浏览器一样阅读CSS"><a href="#6、像浏览器一样阅读CSS" class="headerlink" title="6、像浏览器一样阅读CSS"></a><strong>6、像浏览器一样阅读CSS</strong></h2><p>查看以下选择器：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">nav ul li a</span><br></pre></td></tr></table></figure>

<p>你最有可能从左到右阅读它，但是浏览器从右到左阅读它，这意味着，它会找到页面上的所有&lt;a&gt;标记，然后，对其进行过滤以仅包含&lt;li&gt;内部的那些，然后再次过滤以仅包含那些在&lt;ul&gt;内，最后只有在&lt;nav&gt;内的那些。</p>
<p>因此，它无法尽快匹配。如果没有&lt;a&gt;标记，则无需从&lt;nav&gt;开始匹配，只需找出没有&lt;a&gt;标记即可。</p>
<p>可以说，性能最高的CSS将为页面上的每个HTML元素提供一个ID，并使用它们进行样式设置，而使用CSS选择器则非常昂贵，深度嵌套时更糟。</p>
<p>也许你需要每一个性能，也许你不在乎，并认为浏览器足够快来处理此问题。理想情况下，你应该考虑HTML样式化页面。</p>
<h2 id="7、考虑HTML样式以提高性能"><a href="#7、考虑HTML样式以提高性能" class="headerlink" title="7、考虑HTML样式以提高性能"></a><strong>7、考虑HTML样式以提高性能</strong></h2><p>在设计样式时，请始终考虑您构建 HTML 的方式，尤其是在您阅读了前两条规则/指南（6 和 5）之后。</p>
<p>如果你知道页面上唯一的链接是导航链接，也许使用选择器 a 是可以的，但如果你知道会有更多，使用一个类来区分它，比如 .nav-link。</p>
<p>当嵌套和定位常见的 HTML 标签（如 &lt;div&gt;、&lt;p&gt; 和 &lt;a&gt; 标签）时，样式选择器的会更糟。寻找允许您有效渲染 CSS 但不要采取任何极端措施的策略。</p>
<p>例如，出于样式目的向所有内容添加 id 或 class，除非您使用类实用程序优先库或确实需要额外的性能。为了获得更好的主意，请尝试了解 CSS 的工作原理。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#main-navigation          /* ID (Fastest) */ </span></span><br></pre></td></tr></table></figure>

<h2 id="8、避免使用内联样式"><a href="#8、避免使用内联样式" class="headerlink" title="8、避免使用内联样式"></a><strong>8、避免使用内联样式</strong></h2><p>唯一可以覆盖内联样式的是使用 !important 标签，正如你将在下一个块中阅读的那样，!important 标签可能很糟糕，但内联样式需要它。</p>
<p>避免它们的另一个原因是，你出于某种原因添加了外部样式表，并且该原因是将样式与结构（HTML）分开。对此也有例外，但是，如果你的外部样式表中有样式、HTML 中的样式、Javascript 中的样式，则很难跟踪正在执行的更改，并且随着代码库的增长，它变得难以维护。</p>
<p>一些库和框架（如 Svelte 和 Vue）允许 HTML（JSX）、CSS 和 Javascript 在同一个文件中共存，但归根结底，这真的归结为偏好。</p>
<h2 id="9-、避免使用！important"><a href="#9-、避免使用！important" class="headerlink" title="9 、避免使用！important"></a><strong>9 、避免使用！important</strong></h2><p>如果你正在使用 Bootstrap 并且真的想覆盖一个样式，你将需要使用 !important 标志，但同样，你为什么首先使用 Bootstrap？</p>
<p>如果你发现自己需要使用 !important 标志，这通常表明你遇到了问题。你可能正在使用难以覆盖的第三方库；你正在使用内联样式；你对选择器过于具体；你有 CSS 层次结构或顺序问题，或者应该尝试了解 CSS 特异性是如何计算的。</p>
<h2 id="10、一致地编写CSS"><a href="#10、一致地编写CSS" class="headerlink" title="10、一致地编写CSS"></a><strong>10、一致地编写CSS</strong></h2><p>一致性是关键。即使你做错了所有事情，也要保持一致，因为以后更容易修复它们。找到适合你的命名约定，采用 CSS 方法，以相同的方式组织样式，定义嵌套选择器的级别等。定义你的样式并坚持并随着时间的推移改进它。</p>
<h2 id="11-、使用设计系统"><a href="#11-、使用设计系统" class="headerlink" title="11 、使用设计系统"></a><strong>11 、使用设计系统</strong></h2><p>设计系统允许您为将来构建，因为它允许您定义一般的设计规则和规范，遵循组织，模块化，定义最佳实践等。之所以采用面向未来的策略，是因为它更容易实现在全球范围内引入变更，修复和配置事物。</p>
<p>设计系统允许你为未来构建，因为它允许你定义一般设计规则和规范、遵循组织、模块化、定义最佳实践等。它是面向未来的策略的，原因是它更容易在全球范围内引入更改、修复和配置事物。</p>
<h2 id="12、使用速记"><a href="#12、使用速记" class="headerlink" title="12、使用速记"></a><strong>12、使用速记</strong></h2><p>有时你想指定 padding-top 或 border-right ，但根据经验，我经常回到这些来添加更多，所以，我习惯于总是使用速记，以便在不指定很多属性的情况下更容易更改，代码更少。</p>
<h2 id="13-、结合通用样式"><a href="#13-、结合通用样式" class="headerlink" title="13 、结合通用样式"></a><strong>13 、结合通用样式</strong></h2><p>通过将具有相同样式规则的选择器分组来避免重复样式。你可以用逗号来分隔具有相同样式主体的选择器。</p>
<h2 id="14、-将常见技巧转换为实用程序类"><a href="#14、-将常见技巧转换为实用程序类" class="headerlink" title="14、 将常见技巧转换为实用程序类"></a><strong>14、 将常见技巧转换为实用程序类</strong></h2><p>如果你发现自己一遍又一遍地应用技巧或相同的样式，请将它们转换为 class-utils 以直接在 HTML 标记上使用。</p>
<p>对我来说，这些是像带有显示 flex 或网格的 center 这样的东西，所以我创建了一个类 .center-flex 和 .center-grid。创建类实用程序来自动化这些重复的样式组合。</p>
<h2 id="15、更多使用相对单位"><a href="#15、更多使用相对单位" class="headerlink" title="15、更多使用相对单位"></a><strong>15、更多使用相对单位</strong></h2><p>你真的应该尝试更多地使用相对单位。像 em、rem、%、vw、vh、fr 等。使用 px 和 pt 设置固定值应该是静态设计的东西，尽管有些情况下需要这些值单位。浏览器很灵活，你的网站和单位也应该如此。</p>
<h2 id="16、注意昂贵的属性"><a href="#16、注意昂贵的属性" class="headerlink" title="16、注意昂贵的属性"></a><strong>16、注意昂贵的属性</strong></h2><p>现在浏览器速度非常快，但有时，在复杂的网站上，我会看到一些与设置框阴影、边框半径、位置、过滤器，甚至宽度和高度相关的绘画问题，尤其是对于复杂的动画或重复更改。这些要求浏览器进行复杂的重新计算，并将视图重新绘制到每个嵌套的子级。</p>
<h2 id="17-、最小化布局修改样式"><a href="#17-、最小化布局修改样式" class="headerlink" title="17 、最小化布局修改样式"></a><strong>17 、最小化布局修改样式</strong></h2><p>布局修饰符是width，height，left，top，margin，order等属性。这些属性的动画和执行更改的成本更高，因为它们需要浏览器重新计算布局和接收更改的元素的所有后代。当你同时对许多这些属性进行更改时，它开始变得更加明显，因此请注意这一点。</p>
<h2 id="18-、使用“will-change”作为最后的手段"><a href="#18-、使用“will-change”作为最后的手段" class="headerlink" title="18 、使用“will-change”作为最后的手段"></a><strong>18 、使用“will-change”作为最后的手段</strong></h2><p>“will-change”被用作性能提升来告诉浏览器一个属性将如何改变。浏览器会在使用之前进行复杂的计算，虽然这听起来是件好事，但通常情况下，你并不需要它。除非你发现与事物变化相关的性能问题，例如在转换或动画事物时，否则使用是最后的手段。</p>
<h2 id="19、对CSS写注释"><a href="#19、对CSS写注释" class="headerlink" title="19、对CSS写注释"></a><strong>19、对CSS写注释</strong></h2><p>注释是个好东西，采纳吧！如果你编写了复杂的 hacks 或发现某些事情有效但不知道为什么，请添加注释。为复杂的事情添加注释，组织你的 CSS，帮助其他人理解你的想法和策略，并在你以后回来时，帮助你从你的混乱中弄明白它。</p>
<h2 id="20、规范化或重置你的-CSS"><a href="#20、规范化或重置你的-CSS" class="headerlink" title="20、规范化或重置你的 CSS"></a><strong>20、规范化或重置你的 CSS</strong></h2><p>每个浏览器都带有CSS元素的默认样式，并且这些样式各不相同，因此，你的东西可能在一个浏览器中看起来是一种方式，而在另一种浏览器中则不同，它可能具有你意想不到的额外边框或形状。通过重置或规范化你的 CSS，你可以简化这些事情，并让你的样式有更好的机会在任何浏览器中看起来相同。</p>
<h2 id="21-、考虑更好的字体加载策略"><a href="#21-、考虑更好的字体加载策略" class="headerlink" title="21 、考虑更好的字体加载策略"></a><strong>21 、考虑更好的字体加载策略</strong></h2><p>你可以继续使用 @font-face 来定义你的字体，但使用 &lt;link/&gt; 标签来加载你的字体，这样你就可以推迟它们，尤其是当你有 1 个以上的字体文件时。你还应该研究 SVG 字体并了解它们，因为它们允许更准确的字体渲染。在样式表的顶部添加 @font-face 规则。</p>
<h2 id="22-、-避免过多的字体文件"><a href="#22-、-避免过多的字体文件" class="headerlink" title="22 、 避免过多的字体文件"></a><strong>22 、 避免过多的字体文件</strong></h2><p>也许设计师给了你太多的字体文件，这是一个危险信号。字体过多的网站可能会变得混乱，因此，请始终确保包含页面所需的字体。字体加载和应用可能需要一些时间，当你有太多字体时，你的 UI 通常会在字体加载后跳转不到位。</p>
<h2 id="23-、-最小化-CSS"><a href="#23-、-最小化-CSS" class="headerlink" title="23 、 最小化 CSS"></a><strong>23 、 最小化 CSS</strong></h2><p>在将 CSS 加载到浏览器之前，将其最小化。你可以使用后处理器或使其成为站点部署的简单构建过程步骤。较小的 CSS 文件加载速度会更快，并且会更快地开始处理。</p>
<h2 id="24-、使用-CSS-变量"><a href="#24-、使用-CSS-变量" class="headerlink" title="24 、使用 CSS 变量"></a><strong>24 、使用 CSS 变量</strong></h2><p>我使用预处理器的第一个原因是变量和 CSS 变量更好，因为它们在浏览器中加载时会保留下来。支持很好，它允许你创建更灵活和可重用的 UI，更不用说它可以帮助你创建更强大的设计系统和功能。</p>
<h2 id="25-、不要删除大纲属性，设置样式！"><a href="#25-、不要删除大纲属性，设置样式！" class="headerlink" title="25 、不要删除大纲属性，设置样式！"></a><strong>25 、不要删除大纲属性，设置样式！</strong></h2><p>不要将大纲属性设置为“无”，而是设置样式！如果你不喜欢它的外观，请对其进行样式设置以匹配你网站的外观。对于使用键盘或其他屏幕阅读浏览你的网站的人来说，大纲对于让他们跟踪自己的位置至关重要。</p>
<h2 id="26-、不要不必要地引入-CSS-库-框架"><a href="#26-、不要不必要地引入-CSS-库-框架" class="headerlink" title="26 、不要不必要地引入 CSS 库/框架"></a><strong>26 、不要不必要地引入 CSS 库/框架</strong></h2><p>现在大多数人做的第一件事就是添加一个 CSS 库或框架，从长远来看，有时这可能是一个代价高昂的决定。通常这些人会遇到一些他们不知道该怎么做的事情，因此，会带来整个图书馆来提供帮助。</p>
<p>添加 CSS 库应该慎重考虑。除非，你打算使用其大部分功能，否则不要添加，你和团队对这个决定需要感到满意，这确实有助于大大减少交付时间和调试时间。如果你带来了一个新的库，请花时间学习并充分利用它。如果你经常发现自己覆盖或破解第三方库，则不需要它！</p>
<h2 id="27-、使用双引号"><a href="#27-、使用双引号" class="headerlink" title="27 、使用双引号"></a><strong>27 、使用双引号</strong></h2><p>每当你包含任何字符串值（如背景或字体 URL 或内容）时，请首选双引号并保持一致。很多人省略了有时可以工作但可能会导致 CSS 解析工具出现问题的引号。此外，查看 CSS 属性引号以自动化其中的一些。</p>
<h2 id="28-、避免难以维护的黑客攻击"><a href="#28-、避免难以维护的黑客攻击" class="headerlink" title="28 、避免难以维护的黑客攻击"></a><strong>28 、避免难以维护的黑客攻击</strong></h2><p>每当你将 hack 引入你的样式时，最好将其放在一个单独的文件中，以便于维护，例如 hacks.css。随着代码库的增长，很难找到它们并解决它们，总的来说，如果可能的话，尽量避免黑客攻击。</p>
<h2 id="29-、使用-CSS-格式化文本"><a href="#29-、使用-CSS-格式化文本" class="headerlink" title="29 、使用 CSS 格式化文本"></a><strong>29 、使用 CSS 格式化文本</strong></h2><p>CSS 可以格式化你的 HTML 文本。无需在 HTML 中手动编写所有大写、所有小写或大写的单词。更改 CSS 属性值比更改 HTML 中的所有文本要快得多，而且国际化也更好，因为它允许你根据需要编写文本并使用 CSS 操纵它的外观。</p>
<h2 id="30-、-验证-CSS"><a href="#30-、-验证-CSS" class="headerlink" title="30 、 验证 CSS"></a><strong>30 、 验证 CSS</strong></h2><p>W3C组织提供了一个免费的 CSS 验证器，你可以使用它来确保你的 CSS 遵循正确的 CSS 样式规则和指南的一般指南。</p>
<h2 id="31-、-风格反应灵敏或至少流畅"><a href="#31-、-风格反应灵敏或至少流畅" class="headerlink" title="31 、 风格反应灵敏或至少流畅"></a><strong>31 、 风格反应灵敏或至少流畅</strong></h2><p>你正在创建要在浏览器中使用的内容，这意味着人们将使用各种设备类型和尺寸访问它。通过考虑流畅或响应式设计，真正考虑改善这些人的体验。如果你的项目不包括响应计划，请尝试至少保持流畅。</p>
<h2 id="32-、-让内容定义大小"><a href="#32-、-让内容定义大小" class="headerlink" title="32 、 让内容定义大小"></a><strong>32 、 让内容定义大小</strong></h2><p>例如，不要设置按钮的宽度和高度，而是考虑为间距设置一些填充并包括 max-width 和 max-height ，除非设计要求严格的大小。</p>
<h2 id="33-、-遵循-CSS-方法论"><a href="#33-、-遵循-CSS-方法论" class="headerlink" title="33 、 遵循 CSS 方法论"></a><strong>33 、 遵循 CSS 方法论</strong></h2><p>CSS 方法将确保你的样式的一致性和未来证明。有几个选项可以尝试，或者你甚至可以采用多个选项。</p>
<ul>
<li><p>BEM（块元素修饰符）——这是一种强大的方法，旨在使用类命名约定将块（组件）与元素（组件部分）和修饰符（组件和元素状态）分开。</p>
</li>
<li><p>ITCSS（倒三角形 CSS）——一种非常强大的方法，可以根据 3 条原则按特定级别组织事物：通用到显式，从低到高的特殊性，以及影响深远的本地化样式规则。</p>
</li>
<li><p>OOCSS（面向对象的 CSS）——一种非常好的方法，旨在按照 CSS 中常见的面向对象范例分离和抽象独立的片段以实现可重用性。</p>
</li>
</ul>
<h2 id="34-、-避免不断覆盖-撤消样式"><a href="#34-、-避免不断覆盖-撤消样式" class="headerlink" title="34 、 避免不断覆盖/撤消样式"></a><strong>34 、 避免不断覆盖/撤消样式</strong></h2><p>一个巨大的危险信号是你编写 CSS 样式，然后在其他地方编写具有不同值的相同 CSS，几乎覆盖了所有内容。如果你经常这样做，那么，你处理项目样式的方式显然有问题。</p>
<p>你几乎永远不应该陷入需要覆盖自己的样式的情况。它表明，你有样式变化，并且你可能没有事先规划你的UI。</p>
<h2 id="35-、最后添加动画声明"><a href="#35-、最后添加动画声明" class="headerlink" title="35 、最后添加动画声明"></a><strong>35 、最后添加动画声明</strong></h2><p>你可以做的另一件事是将你的动画 @keyframes 放在一个单独的文件中，并将其包含在样式表的末尾或简单地最后导入。这将确保在浏览器尝试在加载时，执行任何动画之前读取你的整个样式。</p>
<h2 id="36-、不要将第三方-CSS-覆盖与你的混合"><a href="#36-、不要将第三方-CSS-覆盖与你的混合" class="headerlink" title="36 、不要将第三方 CSS 覆盖与你的混合"></a><strong>36 、不要将第三方 CSS 覆盖与你的混合</strong></h2><p>每当你编写样式来覆盖第三方库时，请考虑将其放在单独的文件中，以便于跟踪和维护。如果你决定稍后删除该库，则删除会更容易，并且将它们放入自己的文件中已经是自我文档化了。</p>
<h2 id="37-、指定需要转换的属性"><a href="#37-、指定需要转换的属性" class="headerlink" title="37 、指定需要转换的属性"></a><strong>37 、指定需要转换的属性</strong></h2><p>当你指定转换时，请始终包括你打算转换的所有属性名称。使用“all”或不使用属性名称将迫使浏览器尝试转换所有内容并影响转换性能。</p>
<h2 id="38-、避免在任何地方使用-id-属性"><a href="#38-、避免在任何地方使用-id-属性" class="headerlink" title="38 、避免在任何地方使用 id 属性"></a><strong>38 、避免在任何地方使用 id 属性</strong></h2><p>也许你是一个疯狂的人，他们迫切希望从你的 CSS 中获得每一点性能，否则，在任何地方使用 id 都可能很糟糕。id 属性样式很难覆盖，并且每个页面都是唯一的，因此请遵循以下 id 用法指南：</p>
<ul>
<li><p>将它用于页面上真正独特的东西，例如logo标识和容器；</p>
</li>
<li><p>不要在要重复使用的组件上或内部使用它；</p>
</li>
<li><p>在你要链接到的网站的标题和部分上使用它；</p>
</li>
<li><p>如有必要，使用 id 生成器来确保唯一性；</p>
</li>
</ul>
<h2 id="39-、注意样式顺序"><a href="#39-、注意样式顺序" class="headerlink" title="39 、注意样式顺序"></a><strong>39 、注意样式顺序</strong></h2><p>CSS 代表级联样式表，这意味着最后出现的任何样式都有可能覆盖以前的样式，因此，请按照确保应用所需样式的顺序对样式进行排序。这完全是为了了解你对 CSS 特异性的理解。</p>
<h2 id="40、-整理你的风格"><a href="#40、-整理你的风格" class="headerlink" title="40、 整理你的风格"></a><strong>40、 整理你的风格</strong></h2><p>Linting 的工作原理是确保你遵循为样式定义的规则，并确保你的样式一致、结构良好，并遵循 CSS 最佳实践。了解 Stylelint 以及如何在你喜欢的 IDE 中设置样式 linting 以及如何设置你的配置文件。</p>
<h2 id="41-、按字母顺序排列-CSS-属性"><a href="#41-、按字母顺序排列-CSS-属性" class="headerlink" title="41 、按字母顺序排列 CSS 属性"></a><strong>41 、按字母顺序排列 CSS 属性</strong></h2><p>它使查找内容变得更加容易，你甚至可以使用 Stylelint 来强制执行此规则。</p>
<h2 id="42-、框大小-border-box-一切"><a href="#42-、框大小-border-box-一切" class="headerlink" title="42 、框大小 border-box 一切"></a><strong>42 、框大小 border-box 一切</strong></h2><p>CSS 属性 box-sizing 默认值应该是 border-box ，并且它被列为许多 CSS API 错误之一。在顶层简单地声明 <em>,</em>::after, *::before{box-sizing: border-box;}。</p>
<h2 id="43-、避免颜色名称"><a href="#43-、避免颜色名称" class="headerlink" title="43 、避免颜色名称"></a><strong>43 、避免颜色名称</strong></h2><p>更喜欢用十六进制和颜色函数指定颜色值，而不是说红色、紫色、青色。有数百万个十六进制颜色值，而不是所有这些值的名称。为了保持一致性，找到一种添加颜色的方法并坚持下去。</p>
<h2 id="44-、-让父级处理间距、位置和大小"><a href="#44-、-让父级处理间距、位置和大小" class="headerlink" title="44 、 让父级处理间距、位置和大小"></a><strong>44 、 让父级处理间距、位置和大小</strong></h2><p>当为要在内容流中使用的组件设置样式时，让内容和内部间距定义大小，不包括位置和边距等内容。让使用此组件的容器来决定位置以及此组件与其他组件的距离。</p>
<h2 id="45-、尝试组织-CSS-以匹配标记顺序"><a href="#45-、尝试组织-CSS-以匹配标记顺序" class="headerlink" title="45 、尝试组织 CSS 以匹配标记顺序"></a><strong>45 、尝试组织 CSS 以匹配标记顺序</strong></h2><p>它确实可以让你更轻松地通过查看 CSS 来理解你的标记。这是我做的事情，为我节省了很多时间。</p>
<h2 id="46-、保持-HTML-语义并使用-CSS-进行样式设置"><a href="#46-、保持-HTML-语义并使用-CSS-进行样式设置" class="headerlink" title="46 、保持 HTML 语义并使用 CSS 进行样式设置"></a><strong>46 、保持 HTML 语义并使用 CSS 进行样式设置</strong></h2><p>经常会发现开发人员会四处更改 HTML 以应用某种样式。通常，将样式设置为 CSS，并让你的 HTML 以语义上有意义的方式构建。此规则有例外，但始终确保采用的结构不违反任何 HTML 语义规则。</p>
<p>首先，编写 HTML 时要考虑内容，而不是样式。比添加 CSS 并在出于样式原因更改 HTML 之前尽力而为。</p>
<h2 id="47-、连字符还是下划线？"><a href="#47-、连字符还是下划线？" class="headerlink" title="47 、连字符还是下划线？"></a><strong>47 、连字符还是下划线？</strong></h2><p>类名和 id 名称最常见的分隔符是连字符，但无论你选择什么，都要坚持使用。</p>
<h2 id="48-、-在你寻求-Javascript-帮助之前先找到-CSS-解决方案"><a href="#48-、-在你寻求-Javascript-帮助之前先找到-CSS-解决方案" class="headerlink" title="48 、 在你寻求 Javascript 帮助之前先找到 CSS 解决方案"></a><strong>48 、 在你寻求 Javascript 帮助之前先找到 CSS 解决方案</strong></h2><p>我一直在分享如何在我的 Youtube UI/UX 库中尽可能多地使用 CSS 构建通用组件，我想让你明白的是，在你尝试添加 Javascript 之前，你应该尝试找到一个 CSS 解决方案（不要太老套），甚至，当你添加 Javascript 时，请考虑让 CSS 完成大部分样式并使用 Javascript 来处理触发器和副作用之类的事情。</p>
<h2 id="49-、-删除未使用的-CSS"><a href="#49-、-删除未使用的-CSS" class="headerlink" title="49 、 删除未使用的 CSS"></a><strong>49 、 删除未使用的 CSS</strong></h2><p>出于同样的原因，你应该发布你将使用的唯一 CSS，考虑使用 PurgeCSS 之类的工具来删除渲染中不需要的 CSS。</p>
<p>这些工具将查看你的 CSS 和 HTML，以确定你需要哪些样式。</p>
<p>如果你不确定你是否需要这个，考虑使用浏览器工具来查找你的代码覆盖率，它会告诉你是否正在发布未使用的样式。</p>
<h2 id="50-、-使用后处理器"><a href="#50-、-使用后处理器" class="headerlink" title="50 、 使用后处理器"></a><strong>50 、 使用后处理器</strong></h2><p>真正考虑将 PostCSS 添加到你的项目中，以便你可以利用各种插件来优化你的 CSS，例如 Autoprefixer（添加 webkit-、moz-、ms- 等）、CSSNano（最小化你的 CSS）、postcss-preset-css（允许你编写未来的 CSS），以及许多其他可以帮助你定义标准和规则、介绍工具、类实用程序、与 javascript 通信并标准化。</p>
<h2 id="结论"><a href="#结论" class="headerlink" title="结论"></a><strong>结论</strong></h2><p>没有人会在一夜之间就会编写更好的 CSS，这需要练习和调整。这些在我的 CSS 之旅中帮助了我很多，我相信它们也会帮助你。</p>
<p>每一次体验都是独一无二的，你应该保持开放的心态，尝试各种事情，直到它们适合你为止。</p>
<p>不要害怕采用工具来帮助你，但也不要因为每个人都这样做而急于跳入某事。在理解、编写和组织 CSS 方面有艺术水平。无论你最终采用什么规则，都要保持一致。</p>
<p>感谢你的阅读。祝你好运！</p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://vixcity.gitee.io/my-gitee-blog">Vixcity</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://vixcity.gitee.io/my-gitee-blog/2021/10/11/%E3%80%90CSS%E3%80%9150%E4%B8%AA%E6%9C%89%E4%BB%B7%E5%80%BC%E7%9A%84CSS%E7%BC%96%E5%86%99%E8%A7%84%E5%88%99%EF%BC%8C%E8%AE%A9%E4%BD%A0%E5%86%99%E5%87%BA%E6%9B%B4%E5%A5%BD%E7%9A%84CSS/">http://vixcity.gitee.io/my-gitee-blog/2021/10/11/%E3%80%90CSS%E3%80%9150%E4%B8%AA%E6%9C%89%E4%BB%B7%E5%80%BC%E7%9A%84CSS%E7%BC%96%E5%86%99%E8%A7%84%E5%88%99%EF%BC%8C%E8%AE%A9%E4%BD%A0%E5%86%99%E5%87%BA%E6%9B%B4%E5%A5%BD%E7%9A%84CSS/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://vixcity.gitee.io/my-gitee-blog" target="_blank">Vixcity</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/my-gitee-blog/tags/CSS/">CSS</a></div><div class="post_share"><div class="social-share" data-image="/my-gitee-blog/img/CSS.jpg" data-sites="wechat,qq"></div><link rel="stylesheet" href="/my-gitee-blog/" media="print" onload="this.media='all'"><script src="/my-gitee-blog/" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/my-gitee-blog/2021/10/13/%E3%80%90Vue%E3%80%91%E6%95%B4%E7%90%86%E7%9A%84%E4%B8%80%E4%BA%9B%20Vue3%20%E7%9F%A5%E8%AF%86%E7%82%B9/"><img class="prev-cover" src="/my-gitee-blog/img/Vue.jpg" onerror="onerror=null;src='/my-gitee-blog/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">【Vue】整理的一些 Vue3 知识点</div></div></a></div><div class="next-post pull-right"><a href="/my-gitee-blog/2021/10/09/%E3%80%90%E5%89%8D%E7%AB%AF%E6%8D%A2%E8%82%A4%E3%80%91%E5%89%8D%E7%AB%AF%E6%8D%A2%E8%82%A4%E7%9A%84N%E7%A7%8D%E6%96%B9%E6%A1%88%EF%BC%8C%E8%AF%B7%E6%94%B6%E4%B8%8B/"><img class="next-cover" src="/my-gitee-blog/img/%E8%9C%82%E7%AA%9D%E5%BD%A2%E5%85%AD%E8%BE%B9%E5%BD%A2%E8%93%9D%E7%B4%AB%E8%89%B2%E8%B0%83%E7%82%AB%E9%85%B7%E8%83%8C%E6%99%AF.jpg" onerror="onerror=null;src='/my-gitee-blog/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">【前端换肤】前端换肤的N种方案，请收下</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/my-gitee-blog/2021/10/04/%E3%80%90CSS%E3%80%91CSS%20%E4%BB%A3%E7%A0%81%E9%87%8D%E6%9E%84%E4%B8%8E%E4%BC%98%E5%8C%96%E4%B9%8B%E8%B7%AF/" title="【CSS】CSS 代码重构与优化之路"><img class="cover" src="/my-gitee-blog/img/CSS.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-10-04</div><div class="title">【CSS】CSS 代码重构与优化之路</div></div></a></div><div><a href="/my-gitee-blog/2021/09/09/%E3%80%90CSS%E3%80%91margin%20%E5%A1%8C%E9%99%B7%E5%92%8C%E5%90%88%E5%B9%B6%E9%97%AE%E9%A2%98/" title="【CSS杂谈】margin 塌陷和合并问题"><img class="cover" src="/my-gitee-blog/img/CSS.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-09-09</div><div class="title">【CSS杂谈】margin 塌陷和合并问题</div></div></a></div><div><a href="/my-gitee-blog/2021/09/13/%E3%80%90CSS%E3%80%91%E5%85%A8%E5%85%BC%E5%AE%B9%E7%9A%84%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C/" title="【CSS杂谈】全兼容的毛玻璃效果"><img class="cover" src="/my-gitee-blog/img/CSS.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-09-13</div><div class="title">【CSS杂谈】全兼容的毛玻璃效果</div></div></a></div><div><a href="/my-gitee-blog/2021/09/22/%E3%80%90CSS%E3%80%91%E5%AE%9E%E7%8E%B0%E6%96%B0%E6%8B%9F%E6%80%81(Neumorphism)%20UI%20%E9%A3%8E%E6%A0%BC/" title="【CSS】实现新拟态(Neumorphism) UI 风格"><img class="cover" src="/my-gitee-blog/img/CSS.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-09-22</div><div class="title">【CSS】实现新拟态(Neumorphism) UI 风格</div></div></a></div><div><a href="/my-gitee-blog/2021/09/16/%E3%80%90CSS%E3%80%91%E5%A6%99%E7%94%A8%20background%20%E5%AE%9E%E7%8E%B0%E8%8A%B1%E5%BC%8F%E6%96%87%E5%AD%97%E6%95%88%E6%9E%9C/" title="【CSS杂谈】妙用 background 实现花式文字效果"><img class="cover" src="/my-gitee-blog/img/CSS.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-09-16</div><div class="title">【CSS杂谈】妙用 background 实现花式文字效果</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="lv-container" data-id="city" data-uid="MTAyMC81NDQ0NS8zMDkxNg=="></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/my-gitee-blog/img/avatar.png" onerror="this.onerror=null;this.src='/my-gitee-blog/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Vixcity</div><div class="author-info__description">今日事，今日毕</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/my-gitee-blog/archives/"><div class="headline">文章</div><div class="length-num">55</div></a></div><div class="card-info-data-item is-center"><a href="/my-gitee-blog/tags/"><div class="headline">标签</div><div class="length-num">50</div></a></div><div class="card-info-data-item is-center"><a href="/my-gitee-blog/categories/"><div class="headline">分类</div><div class="length-num">18</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/Vixcity"><i class="fab fa-github"></i><span>我的Github</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/Vixcity" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:2091283625@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">这是Vixcity目前的小博客</div></div><div class="sticky_layout"><div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-clock fa-spin"></i><span>那年今日</span></div><div id="history-baidu" style="height: 100px;overflow: hidden;"><div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%;"><div class="swiper-wrapper" id="history_container_wrapper" style="height:20px"></div></div></div></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/my-gitee-blog/2022/07/13/%E3%80%90NodeJS%E3%80%91NodeJS%20%E6%9C%8D%E5%8A%A1%E7%AB%AF%E8%AF%B7%E6%B1%82/" title="【NodeJS】NodeJS 服务端请求"><img src="/my-gitee-blog/img/NodeJs.jpg" onerror="this.onerror=null;this.src='/my-gitee-blog/img/404.jpg'" alt="【NodeJS】NodeJS 服务端请求"/></a><div class="content"><a class="title" href="/my-gitee-blog/2022/07/13/%E3%80%90NodeJS%E3%80%91NodeJS%20%E6%9C%8D%E5%8A%A1%E7%AB%AF%E8%AF%B7%E6%B1%82/" title="【NodeJS】NodeJS 服务端请求">【NodeJS】NodeJS 服务端请求</a><time datetime="2022-07-12T16:00:00.000Z" title="发表于 2022-07-13 00:00:00">2022-07-13</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/my-gitee-blog/2022/07/12/%E3%80%90Hexo%E3%80%91%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F%E5%88%97%E8%A1%A8%E5%8F%82%E8%80%83%20-%201/" title="【Hexo】标签样式列表参考 - 1"><img src="/my-gitee-blog/img/hexo.jpg" onerror="this.onerror=null;this.src='/my-gitee-blog/img/404.jpg'" alt="【Hexo】标签样式列表参考 - 1"/></a><div class="content"><a class="title" href="/my-gitee-blog/2022/07/12/%E3%80%90Hexo%E3%80%91%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F%E5%88%97%E8%A1%A8%E5%8F%82%E8%80%83%20-%201/" title="【Hexo】标签样式列表参考 - 1">【Hexo】标签样式列表参考 - 1</a><time datetime="2022-07-11T16:00:00.000Z" title="发表于 2022-07-12 00:00:00">2022-07-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/my-gitee-blog/2022/07/12/%E3%80%90Hexo%E3%80%91%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F%E5%88%97%E8%A1%A8%E5%8F%82%E8%80%83%20-%202/" title="【Hexo】标签样式列表参考 - 2"><img src="/my-gitee-blog/img/hexo.jpg" onerror="this.onerror=null;this.src='/my-gitee-blog/img/404.jpg'" alt="【Hexo】标签样式列表参考 - 2"/></a><div class="content"><a class="title" href="/my-gitee-blog/2022/07/12/%E3%80%90Hexo%E3%80%91%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F%E5%88%97%E8%A1%A8%E5%8F%82%E8%80%83%20-%202/" title="【Hexo】标签样式列表参考 - 2">【Hexo】标签样式列表参考 - 2</a><time datetime="2022-07-11T16:00:00.000Z" title="发表于 2022-07-12 00:00:00">2022-07-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/my-gitee-blog/2022/07/12/%E3%80%90Hexo%E3%80%91%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F%E5%88%97%E8%A1%A8%E5%8F%82%E8%80%83%20-%203/" title="【Hexo】标签样式列表参考 - 3"><img src="/my-gitee-blog/img/hexo.jpg" onerror="this.onerror=null;this.src='/my-gitee-blog/img/404.jpg'" alt="【Hexo】标签样式列表参考 - 3"/></a><div class="content"><a class="title" href="/my-gitee-blog/2022/07/12/%E3%80%90Hexo%E3%80%91%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F%E5%88%97%E8%A1%A8%E5%8F%82%E8%80%83%20-%203/" title="【Hexo】标签样式列表参考 - 3">【Hexo】标签样式列表参考 - 3</a><time datetime="2022-07-11T16:00:00.000Z" title="发表于 2022-07-12 00:00:00">2022-07-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/my-gitee-blog/2022/07/07/%E3%80%90NodeJS%E3%80%91NodeJS%E5%85%A5%E9%97%A8%E5%AD%A6%E4%B9%A0/" title="【NodeJS】NodeJS入门学习"><img src="/my-gitee-blog/img/NodeJs.jpg" onerror="this.onerror=null;this.src='/my-gitee-blog/img/404.jpg'" alt="【NodeJS】NodeJS入门学习"/></a><div class="content"><a class="title" href="/my-gitee-blog/2022/07/07/%E3%80%90NodeJS%E3%80%91NodeJS%E5%85%A5%E9%97%A8%E5%AD%A6%E4%B9%A0/" title="【NodeJS】NodeJS入门学习">【NodeJS】NodeJS入门学习</a><time datetime="2022-07-06T16:00:00.000Z" title="发表于 2022-07-07 00:00:00">2022-07-07</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('/my-gitee-blog/img/CSS.jpg')"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2022 By Vixcity</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div id="running-time"></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">简</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/my-gitee-blog/js/utils.js"></script><script src="/my-gitee-blog/js/main.js"></script><script src="/my-gitee-blog/js/tw_cn.js"></script><script src="/my-gitee-blog/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>function loadLivere () {
  if (typeof LivereTower === 'object') {
    window.LivereTower.init()
  }
  else {
    (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
    })(document, 'script');
  }
}

if ('Livere' === 'Livere' || !false) {
  if (false) btf.loadComment(document.getElementById('lv-container'), loadLivere)
  else loadLivere()
}
else {
  function loadOtherComment () {
    loadLivere()
  }
}</script></div><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="/my-gitee-blog/js/newStyle.js"></script><script src="/my-gitee-blog/js/sakura.js"></script><script>setInterval(()=>{let create_time=Math.round(new Date("2021-9-8-00:00:00").getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600}if(second>=3600){time[2]=parseInt(second/3600);second%=3600}if(second>=60){time[3]=parseInt(second/60);second%=60}if(second>0){time[4]=second}currentTimeHtml='小博客已经安全运行 '+time[0]+' 年 '+time[1]+' 天 '+time[2]+' 时 '+time[3]+' 分 '+time[4]+' 秒';var elementById=document.getElementById('running-time');if(elementById){elementById.innerHTML=currentTimeHtml}},1000);</script><script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script><script src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/js/main.js"></script><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js"></script><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><script data-pjax>function electric_clock_injector_config(){
                var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
                var item_html = '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img id="card-clock-loading" src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-clock/clock/images/weather/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading" class="entered loading"></div></div></div></div></div>';
                console.log('已挂载electric_clock')
                // parent_div_git.innerHTML=item_html+parent_div_git.innerHTML // 无报错，但不影响使用(支持pjax跳转)
                parent_div_git.insertAdjacentHTML("afterbegin",item_html) // 有报错，但不影响使用(支持pjax跳转)
            }if( document.getElementsByClassName('sticky_layout')[0] && (location.pathname ==='all'|| 'all' ==='all')){

            electric_clock_injector_config()
        } </script><script src="https://pv.sohu.com/cityjson?ie=utf-8"></script><script data-pjax  src="https://cdn.jsdelivr.net/gh/Zfour/hexo-electric-clock@1.0.6/clock.js"></script><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1s');
    arr[i].setAttribute('data-wow-delay', '0.5s');
    arr[i].setAttribute('data-wow-offset', '100');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://unpkg.zhimg.com/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://unpkg.zhimg.com/hexo-butterfly-wowjs/lib/wow_init.js"></script><!-- hexo injector body_end end --><script src="/my-gitee-blog/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body></html>